<template>
  <div class="upload">
    <div
      v-for="(item,index) in videoList"
      :key="index"
      class="video mt15"
    >
      <video class="video-box" controls :src="item" />
      <label class="video-btn" @click="handleRemove(index)"><i class="el-icon-close" /></label>
    </div>
    <el-progress
      v-if="showProgress"
      class="progress mt25 mr25 ml25"
      type="circle"
      show-text
      :stroke-width="15"
      :percentage="progress"
    />
    <el-upload
      v-else
      action
      class="uploader mt15"
      list-type="picture-card"
      :http-request="handleUploadAvatar"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload"
    >
      <i class="el-icon-video-camera avatar-uploader-icon">
        <div class="fz16 lh28">上传视频</div>
      </i>
    </el-upload>
  </div>
</template>

<script>
  import { client, getFileFormat, getDateStr, getFileNameUUID } from '@/utils/ali-oss'; // 前面的ali-js文件内的两个封装函数
  export default {
    name: 'VideoUpload',
    props: {
      limitNum: {
        type: Number,
        default: 5
      },
      baseUrl: {
        type: String,
        default: 'http://gq-supplier.oss-cn-beijing.aliyuncs.com/'
      },
      existList: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        videoList: [], // 视频列表
        showProgress: false, // 进度条的显示
        progress: 0 // 进度条数据
      };
    },
    watch: {
      existList(newVal) {
        if (newVal.length > 0) {
          this.videoList = this.existList;
        }
      }
    },
    methods: {
      // 视频上传校验
      beforeAvatarUpload(file) {
        // console.log(file);
        const isLt30 = file.name.length < 30;
        const isExceed = this.videoList.length >= this.limitNum;
        if (isExceed) {
          this.$message.error(`最多可上传${this.limitNum}个视频！`);
          return false;
        }
        if (['video/mp4'].indexOf(file.type) == -1) {
          this.$message.error('请上传正确的视频格式');
          return false;
        }
        if (!isLt30) {
          this.$message.error('上传视频文件名称长度必须要小于30个文字哦!');
          return false;
        }
      },
      // 上传函数
      async handleUploadAvatar(file) {
        const that = this;
        const fileName = getDateStr() + '/' + getFileNameUUID() + '.' + getFileFormat(file.file.name);
        try {
          const result = await client().multipartUpload(`pos/${fileName}`, file.file, {
            progress: function(p) { // p进度条的值
              // console.log(p);
              that.showProgress = true;
              that.progress = Math.floor(p * 100);
            }
          });
          // console.log('成功回调', result);
          return result;
        } catch (e) {
          console.log('失败回调', e);
          return false;
        }
      },
      // 上传视频成功回调
      handleAvatarSuccess(res) {
        if (res) {
          this.videoList.push(this.baseUrl + res.name); // 拼接路径
          this.showProgress = false; // 成功后隐藏进度条
          this.progress = 0; // 进度归0
          this.$emit('getUrl', this.videoList); // 传给父组件
        } else {
          this.$message.error('上传失败,请打开调试台查看失败原因');
        }
      },
      // 删除
      handleRemove(index) {
        this.videoList.splice(index, 1);
        this.$emit('getUrl', this.videoList);
      },
      // 清空列表
      handleClear() {
        this.videoList = [];
      }
    }
  };
</script>

<style scoped lang="scss">
  .upload {
    display: flex;
    justify-content: flex-start;
    .progress {
      width: 126px;
      height: 126px;
    }
    .video {
      width: 148px;
      height: 148px;
      display: block;
      margin-right: 8px;
      border: 1px dashed #c0ccda;
      border-radius: 6px;
      overflow: hidden;
      position: relative;
      &:hover {
        .video-btn {
          display: block;
        }
      }
      .video-box {
        width: 100%;
        height: 100%;
        display: block;
      }
      .video-btn {
        display: none;
        position: absolute;
        top: -6px;
        right: -15px;
        width: 48px;
        height: 24px;
        transform: rotate(45deg);
        background: #F56C6C;
        z-index: 50;
        .el-icon-close {
          color: #FFF;
          transform: rotate(-45deg);
          text-align: center;
          font-size: 12px;
          padding-top: 18px;
          padding-left: 15px;
        }
      }
    }
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    line-height: 28px;
    text-align: center;
    vertical-align: middle;
  }
</style>
